<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    
    
    <script>
        class TrafficLight {
            constructor() {
                this.colors = ['red', 'yellow', 'green'];
                this.times = [3000, 1000, 2000];
                this.currentIndex = 0;
            }
            setLightTime(color,time) {
                const index = this.colors.indexOf(color);
                if(index != -1){
                    this.times[index] = time;
                }
            }
            setLightColor(color) {
                const index = this.colors.indexOf(color);
                if(index != -1){
                    this.currentIndex = index;
                    this.render();
                }
            }
            start() {
                this.isRunning = true;
                this.changeLight();
            }
            pause() {
                this.isRunning = false;
            }
            async changeLight() {
                while(this.isRunning) {
                    const color = this.colors[this.currentIndex]
                    const time = this.times[this.currentIndex]
                    console.log(`${color} light`);
                    // Promise 的高级应用
                    await new Promise(resolve => setTimeout(resolve, time));
                    this.currentIndex = (this.currentIndex + 1) % this.colors.length;
                }
            }
        }
    </script>
</body>
</html>